<html xmlns:th="http://www.thymeleaf.org" >
<head >
	<script src="/plugins/modernizr/js/modernizr.js"></script>
	<script src="/js/jquery.mmenu.min.js"></script>
	<!-- Vendor CSS-->
	<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="/vendor/skycons/css/skycons.css" rel="stylesheet" />
	<link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

	<!-- Plugins CSS-->
	<link href="/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
	<link href="/plugins/scrollbar/css/mCustomScrollbar.css" rel="stylesheet" />
	<link href="/plugins/fullcalendar/css/fullcalendar.css" rel="stylesheet" />
	<link href="/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet" />
	<link href="/plugins/xcharts/css/xcharts.min.css" rel="stylesheet" />
	<link href="/plugins/morris/css/morris.css" rel="stylesheet" />

	<!-- Theme CSS -->
	<link href="/css/jquery.mmenu.css" rel="stylesheet" />

	<!-- Page CSS -->
	<link href="/css/style.css" rel="stylesheet" />
	<link href="/css/add-ons.min.css" rel="stylesheet" />

</head>
<body>
<div id="noRead" class="row" th:fragment="noRead">
	<div id="collectBox3-c" th:fragment="collectBox3" >
		<div  class="col-sm-12"  th:each="collect:${collectList}">

			<div class="panel panel-accordion">
				<div class="panel-heading bk-bg-primary">
					<h4 class="panel-title">
						<a class="accordion-toggle" data-toggle="collapse" style="text-decoration:none;" data-parent="#accordionInfo" href="#collapseInfoOne"th:text="${collect.title}">
							spring-boot - 纯洁的微笑博客
						</a>
					</h4></div>


				<div id="collapseInfo11" class="accordion-body clearfix"  >
					<a  style="color:#5e5e5e;text-decoration:none;" th:href="${collect.url}">
						<img  th:src="${collect.logoUrl}" alt="" height="100px;" width="100px;" style="float: left; margin: 10px 10px 10px 10px;">
						<div class="panel-body"th:text="${collect.category}" style="overflow: hidden; width: 900px; height:100px;float: left; line-height: 20px;" >内容</div>
					</a>
				</div>


				<div class="modal fade" th:id="'delCollect2'+${collect.getId()}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" >
									删除此收藏
								</h4>
							</div>
							<div class="modal-body">
								确定删除您收藏的网页？
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button type="button" class="btn btn-default"  data-dismiss="modal" th:onclick="'delCollect2('+${collect.getId()}+')'">
									确定
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>




				<div style="width: 100%; margin-bottom: 20px;">
											<span style="margin-left: 60%; ">
												<a th:id="'commentSize2'+${collect.getId()}" th:onclick="'opeanview2('+ ${collect.getId()}+')'" style="cursor: pointer; color:#5e5e5e;"><i  class="glyphicon glyphicon-comment" th:text="${collect.getCommentSize()}"></i> </a>
											</span>

					<a th:onclick="'getUserPersional('+ ${collect.getUserId()}+')'" style="cursor: pointer; color: #5e5e5e"><i class="glyphicon glyphicon-user" style="margin-left:30px " th:text="' '+${collect.getUserName()}"></i></a>
					<i class="	glyphicon glyphicon-folder-close" style="margin-left:30px " th:text="' '+${collect.getFavoriteName()}"></i>
					<button class="btn" th:id="'delCollectBtn2'+${collect.getId()}" style="margin-left:30px;" data-toggle="modal" th:data-target="'#delCollect2'+${collect.getId()}" >删除</button>
				</div>
				<ul  th:id="'nn'+${collect.getId()}" style="width:1100px; margin:0 auto;  list-style: none; display: none;">

					<li>
						<p class="clearfix">
							<input type="text" th:id="'viewContent2'+${collect.getId()}" style="height: 30px; width: 1000px; " placeholder="请输入评论内容">
							<button th:onclick="'CommentBtn2('+${collect.getId()}+')'">提交</button>
							<button style="cursor: pointer; float: right; margin:8px 12px 0 0;"  th:onclick="'closeview2('+ ${collect.getId()}+')'">收起</button>
						</p>
					</li>
					<li  th:id="'commentTable2'+${collect.getId()}" >
						<table style="margin-left: 20px;" th:each="commentList:${collect.getCommentList()}">
							<tr>
								<td style="color: #0a0a0a;" th:text="${commentList.getSendUserName()}+' : '"></td>
								<td th:text="${commentList.getContent()}"></td>
								<!--<td><button th:onclick="'delitedComment('+ ${commentList.getId()}+')'">删除</button></td>-->
							</tr>
						</table>

					</li>

				</ul>

			</div>
		</div>

	</div>


	<script>
		function opeanview2(id) {
			$("#nn"+id).show();
		}
		function closeview2(id) {
			$("#nn"+id).hide();
		}
		function toindex2(){
			window.location.reload();
		}

		function deleteCollect2() {

		}
		function delCollect2(id){//删除个人收藏
			$.ajax({
				type:"POST",
				dataType:"JSON",
				contentType: "application/json;charset=UTF-8",
				url:"/deleteCollect",
				data:JSON.stringify({
					id: id
				}),
				success:
						function(Response) {
							if(Response.code ==0){

								$("#noRead").load("/getNoRead?userId="+localStorage.getItem("id"));
								$(".modal-backdrop").hide();
							}
						}
			})

		}
		function CommentBtn2(collectid) {
			$.ajax({
				type:"POST",
				dataType:"JSON",
				contentType: "application/json;charset=UTF-8",
				url:"/addComment",
				data:JSON.stringify({
					content:$("#viewContent2"+collectid).val(),
					sendUserId:localStorage.getItem("id"),
					collectId:collectid
				}),
				beforeSend: function (XMLHttpRequest) {
					XMLHttpRequest.setRequestHeader("token",localStorage.getItem("token"));
				},
				success:function (Response) {
					if(Response.code == 0){
						$("#commentTable2"+collectid).html(" ");
						$("#commentSize2"+collectid).html('<i  class="glyphicon glyphicon-comment"></i>'+Object.keys(Response.msg).length);
						Response.msg.forEach(function (item,index){
							$("#commentTable2"+collectid).html($("#commentTable2"+collectid).html()+
									'<table style="margin-left: 20px;"><tr><td style="color: #0a0a0a;" >'+item.sendUserName+':</td><td >'+ item.content+'</td></tr></table>'
							)

						})
					}else console.log(msg)
				}

			})


		}
	</script>
</div>




<script src="/vendor/js/jquery.min.js"></script>
<script src="/vendor/js/jquery-2.1.1.min.js"></script>
<script src="/vendor/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/vendor/skycons/js/skycons.js"></script>

<!-- Plugins JS-->
<script src="/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
<script src="/plugins/scrollbar/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/plugins/bootkit/js/bootkit.js"></script>
<script src="/plugins/moment/js/moment.min.js"></script>
<script src="/plugins/fullcalendar/js/fullcalendar.min.js"></script>
<script src="/plugins/touchpunch/js/jquery.ui.touch-punch.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.pie.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.resize.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.stack.min.js"></script>
<script src="/plugins/flot/js/jquery.flot.time.min.js"></script>
<script src="/plugins/xcharts/js/xcharts.min.js"></script>
<script src="/plugins/autosize/jquery.autosize.min.js"></script>
<script src="/plugins/placeholder/js/jquery.placeholder.min.js"></script>
<script src="/plugins/datatables/js/dataTables.bootstrap.min.js"></script>
<script src="/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script src="/plugins/raphael/js/raphael.min.js"></script>
<script src="/plugins/morris/js/morris.min.js"></script>
<script src="/plugins/gauge/js/gauge.min.js"></script>
<script src="/plugins/d3/js/d3.min.js"></script>
</body>
</html>
